<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="form">
    <input type="text" name="name">
    <input type="number" name="age">
    <input type="tel" name="phone">

</form>


<form method="post" id="myForm">
    <ul>
        <li><input type="radio" name="color" value="red">Red</li>
        <li><input type="radio" name="color" value="green">Green</li>
        <li><input type="radio" name="color" value="blue">Blue</li>
    </ul>
    <input type="submit" value="Submit" id="submit">
</form>

<script>
    let form = document.getElementById('form')
    console.log('form', [form])
    // form.elements获取form表单中的元素集合
    console.log(form.elements)
    // 或者 form[0]
    console.log(form)


    /*
        操作myForm,实际开发应该用form.elements[]
     */

    let myForm = document.getElementById('myForm')
    console.log('myForm.elements', myForm.elements['color'])

    /*
        防止重复提交
     */
    myForm.addEventListener('submit', (e) => {
        // 完成提交事件后
        console.log('提交')
        let submitBtn = document.querySelector('#submit')
        console.log('submitBtn',[submitBtn])
        submitBtn.disabled = true;
        e.preventDefault();
    })
    
    
    /*
        2.表单字段的公共方法
            - focus
            - blur
     */
    
    /*
        3.表单字段的公共事件
            - blur
            - change
            - focus
     */
    
</script>
</body>
</html>